<template>
  <div class="navClider">
      <ul>
          <li v-for="(val,index) in navText" :key="index" :class="{active:index==i}" @click="chang(index)">{{val}}</li>
      </ul>
  </div>
</template>

<script>
export default {
    name:'navClider',
    props:['navText'],
    data(){
        return {
            i:0
        }
    },
    methods: {
        chang(val){
            this.i=val
            this.$emit('handover',val)
        }
    },
}
</script>

<style lang="less" scoped>
    .navClider{
        ul{
            display: flex;
            padding: 0;
            justify-content: center;
            cursor: pointer;
            li{
                margin: 0 15px;
            }
            li:hover{
                color:#31c27c;
            }
        }
    }
    .active{
        color:#31c27c;
    }
</style>